<template>
    <h3>Reactive全家桶</h3>
    <div @mousedown="change1('lisi')">reactive: {{str}}</div>
    <div @click="changeArr">{{arr}}</div>
    <div @click="changeArr">{{arr2}}</div>


    <div @click="changeTestObj">shallowReactive: {{tetsObj}}</div>
</template>
<script lang="ts" setup>
import { isReactive, reactive, ReactiveEffect, readonly, shallowReactive } from "@vue/reactivity";

// 1 reactive  用来绑定复杂的数据类型 例如 对象 数组
let str = reactive({
    name: '张三'
});
let change1 = (name: string): boolean => {
    str.name = '李四';
    return true;
};

// 注意：数组异步赋值问题
let arr = reactive<number[]>([]);
let arr2 = reactive({
    arr: [1]
})
setTimeout(function(){
    console.warn('timer...')
    // arr = [1, 2, 3];


    // push解决
    // let temp = [3, 4, 5];
    // arr.push(...temp);


    // 数组外包一个对象
    arr2.arr = [33, 44, 55];

}, 2000);

let changeArr = () => {
    console.log('changeArr');
    // arr = [7, 8,9];
    arr[0] = 99;
}



// 2 readonly 拷贝一份proxy对象将其设置为只读
let copy = readonly(str);
copy.name = 'readonl';

// 3 shallowReactive 
let tetsObj = shallowReactive({
    num: 1111,
    color: {
        li: 999
    }
});
const changeTestObj = function() {
    tetsObj.num ++;
    // tetsObj.color.li ++;
    console.log('changeTestObj', tetsObj, isReactive(tetsObj));
}

</script>

<style scope lang="less">

</style>